<template>
    <div class="appoint">
      <section class="item">
        <hgroup>指定EXCEL文件需要导入对象</hgroup>
        <div class="item-center">
          <avue-crud :option="option"
                     :table-loading="loading"
                     :data="tableData"
                     :page.sync="page"
                     ref="crud"
                     @on-load="onLoad"
          >
          </avue-crud>
        </div>
      </section>

      <div class="text-right">
        <el-button @click="handleSetStep(1)">上一步</el-button>
        <el-button @click="handleSetStep(3)">下一步</el-button>
      </div>

    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'appointInfo',
  data () {
    return {
      loading: true,
      page: {
        pageSize: 20,
        currentPage: 1,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: []
    }
  },
  computed: {
    option () {
      return {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 270px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: false, // 多选
        editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: false, // 行内查看按钮
        menuWidth: 200,
        menu: false,
        column: [
          {
            label: '源模式',
            prop: 'fondsNo',
            overHidden: true
          },
          {
            label: '源数据表',
            prop: 'fondsNo1',
            overHidden: true
          },
          {
            label: '目标表',
            prop: 'fondsNo1',
            overHidden: true
          },
          {
            label: '目录关联字段',
            prop: 'fondsNo1',
            overHidden: true
          }
        ]
      }
    }
  },
  methods: {
    ...mapActions('importData/setImportDataStep', ['setImportDataStep']),
    handleSetStep (step) {
      this.setImportDataStep(step)
    },
    onLoad () {
      // 加载列表
      this.loading = true
      /* const query = {
        pageSize: this.page.pageSize,
        pageNo: this.page.currentPage
      }
      getQzDic(query).then(res => {
        this.tableData = res.data.data.list
        this.loading = false
      }) */
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.appoint{
  .item{
    margin-bottom: 20px;
    hgroup{
      background: #40a9ff;
      color: #fff;
      font-size: 15px;
      line-height: 36px;
      height: 36px;
      padding-left: 15px;
      border-radius: 4px 4px 0 0;
    }
    .item-center{
      border: 2px solid #ccc;
      border-top: none;
      min-height: 10px;
      padding: 15px 40px 0 15px;
    }
  }
}
</style>
